import { createStore } from "vuex";
import axios from "axios";
// 创建store仓库
const store = createStore({
  state() {
    return {
      sellerIofo: {}, // 商家头部数据
      goods: [], //商家列表数据
      show: false, //是否展示购物车列表
      carList: [], //购物车列表数据
      price: 0, // 总价
      // 购物车log图片
      img: ["../../../img/12.png", "../../../img/13.jpg"],
      imgSrc: "../../../img/12.png"
    };
  },
  // 计算属性
  getters: {},
  mutations: {
    // 接口获取数据，更新商家头部数据，提供给页面使用
    setSeller(state, payload) {
      // 将接收参数的对象里面的data赋值给state对象里面的sellerIofo
      state.sellerIofo = payload.data;
      console.log(state.sellerIofo);
    },
    // 接口获取数据，更新商家列表数据，提供给页面使用
    setGoods(state, payload) {
      state.goods = payload.data;
      console.log(state.goods);
    },
    // 更新购物车是否展示状态
    showCar(state) {
      state.show = !state.show;
    },
    // 更新购物车列表数组，要先检测
    // 通过添加按钮传过来的数据，我们先检测，购物车列表中是否已经存在，
    // 如果存在则不再添加
    // 如果不存在则push进去
    setCarList(state, payload) {
      // findIndex 满足条件 则 返回对应的列表项下标
      // 如果不满足 ，则返回-1，说明购物车列表中不存在这个对象
      const hasItem = state.carList.findIndex((item) => {
        // 购物车列表中对象的名字，是否等于按钮传过来的对象名字
        return item.name == payload.item.name;
      });
      // 如果购物车里没有这类需要加的商品，可以在购物车里追加这个商品
      if (hasItem == "-1") {
        // 向后追加
        state.carList.push(payload.item);
      }
      // 购物车里面有商品，购物车图标亮起
      state.imgSrc = state.img[1];
    },
    // 删除不要的对应商品
    deleteGoods(state,payload){
      // 查找对应商品的索引下标，然后执行删除操作
      const index=state.carList.findIndex((item)=>{
        return item.name==payload.item.name;
      });
      // index不等于-1证明找到了对应需要删除的商品了，执行删除操作
      if(index!==-1){
        state.carList.splice(index,1)
      }
      // 如果购物车的商品为零购物车变灰色
      if(state.carList.length===0){
        state.imgSrc=state.img[0]
      }  
    },
    // 清空购物车
    delGoodsCar(state){
      state.carList.forEach((item)=>{
        item.count=0;
      })
      state.carList=[];
      state.show=false;
      state.imgSrc=state.img[0];
    },  
  },
  actions: {
    // 获取商家列表数据
    async getGoods({ commit }) {
      const {
        data: { data },
      } = await axios.get("/api/goods");
      commit("setGoods", { data });
    },
    async getSeller({ commit }) {
      // 获取商家头部数据，结构赋值
      const {
        data: { data },
      } = await axios.get("/api/seller");
      // commit提交事件，触发执行mutations里面的setSeller函数，传递的参数是以对象的形式传递
      commit("setSeller", {
        data,
      });
      console.log(data);
    },
  },
});
// 导出store仓库
export default store;
